<!-- 用户，组织，角色Tab弹窗 -->
<template>
  <BasicModal
    v-bind="$attrs"
    :title="t('routes.components.userModal.selectUser')"
    @register="register"
    @ok="handleSubmit"
    @cancel="handleCancel"
    :destroyOnClose="true"
    :minHeight="450"
    :width="600"
  >
    <Tabs v-model:activeKey="activeKey">
      <TabPane key="1" :tab="t('routes.components.userModal.user')">
        <BasicTable @register="registerTable" />
      </TabPane>
      <TabPane key="2" :tab="t('routes.components.userModal.depPart')">
        <BasicTree
          :treeData="treeDepartData"
          checkable
          toolbar
          :title="t('routes.components.userModal.orgAssign')"
        />
      </TabPane>
      <TabPane key="3" :tab="t('routes.components.userModal.role')">
        <BasicTree
          :treeData="treeRoleData"
          checkable
          toolbar
          :title="t('routes.components.userModal.roleAssign')"
        />
      </TabPane>
    </Tabs>
  </BasicModal>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { Tabs, TabPane } from 'ant-design-vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicTable, useTable } from '/@/components/Table';
  import { BasicTree } from '/@/components/Tree';
  import { getUserModalColumns } from './data';

  const { t } = useI18n();
  // tab选中
  const activeKey = ref('1');
  const treeDepartData = ref<any>([]);
  const treeRoleData = ref<any>([]);

  // 提交
  const handleSubmit = () => {
    handleCancel();
  };

  // 取消
  const handleCancel = () => {
    activeKey.value = '1';
    closeModal();
  };

  // 初始化弹窗
  const [register, { setModalProps, closeModal }] = useModalInner(() => {
    setModalProps({ confirmLoading: false });
  });

  // 初始化用户表格
  const [registerTable] = useTable({
    columns: getUserModalColumns(),
    bordered: true,
    showIndexColumn: false,
    showTableSetting: true, // 显示表格设置工具
    tableSetting: { fullScreen: true }, // 表格设置工具配置
    pagination: { pageSize: 5, pageSizeOptions: ['5', '10', '15', '20'], defaultPageSize: 5 },
    canResize: false,
    rowKey: 'id',
  });
</script>
